<script setup>
import { ElMessageBox, ElMessage } from 'element-plus';
import {ref, inject} from 'vue'
import axios from 'axios'

const userinfo=inject("userinfo")

//初始化组件
const name=ref(userinfo.value.name)
const ref_name=ref()
const id_code=ref(userinfo.value.id_code)
const ref_id_code=ref()
const mobile=ref(userinfo.value.mobile)
const ref_mobile=ref()
const email=ref(userinfo.value.email)
const ref_email=ref()
const password1=ref('')
const ref_password1=ref()
const password2=ref('')
const ref_password2=ref()

const ref_button1=ref()
const modify=ref(false)
function handleButton1(e){
    if(modify.value==false){
        ref_button1.value.ref.textContent="收起"
        modify.value=true
    }else{
        ref_button1.value.ref.textContent="修改"
        modify.value=false
    }
}

function setInputStyle(){
    ref_name.value.input.style=name.value==userinfo.value.name?'black':'red'
    ref_id_code.value.input.style=id_code.value==userinfo.value.id_code?'black':'red'
    ref_mobile.value.input.style=mobile.value==userinfo.value.mobile?'black':'red'
    ref_email.value.input.style=email.value==userinfo.value.email?'black':'red'
}

function handleButton2(e){
    name.value=userinfo.value.name
    id_code.value=userinfo.value.id_code
    mobile.value=userinfo.value.mobile
    email.value=userinfo.value.email

    setInputStyle()
}

//提交修改
function handleButton3(e){
    if(name.value==''){
        ElMessageBox.alert("姓名不能为空",{type:'warning'})
        ref_name.value.focus()
        return
    }
    if(/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(id_code.value)==false){
        ElMessageBox.alert("身份证格式有误",{type:'warning'})
        ref_id_code.value.focus()
        return
    }
    if(/^0?(13|14|15|18|19|17)[0-9]{9}$/.test(mobile.value)==false){
        ElMessageBox.alert("手机号格式有误",{type:'warning'})
        ref_mobile.value.focus()
        return
    }
    if(/^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}$/.test(email.value)==false){
        ElMessageBox.alert("邮箱不能为空",{type:'warning'})
        ref_email.value.focus()
        return
    }
    if(password1.value==''){
        ElMessageBox.alert("密码不能为空",{type:'warning'})
        ref_password1.value.focus()
        return
    }
    if(password2.value==''){
        ElMessageBox.alert("请重复输入密码",{type:'warning'})
        ref_password1.value.focus()
        return
    }
    if(password1.value!=password2.value){
        ElMessageBox.alert("两次密码不一致",{type:'warning'})
        ref_password1.value.focus()
        return
    }
    if(name.value==userinfo.value.name&&
    id_code.value==userinfo.value.id_code&&
    mobile.value==userinfo.value.mobile&&
    email.value==userinfo.value.email&&
    password1.value==userinfo.value.password){
        ElMessageBox.alert("内容未改变！",{type:'warning'})
        return
    }

    ElMessageBox.prompt('请输入原密码验证身份',{
        confirmButtonText:'确认',
        cancelButtonText:'取消',
        inputType:'password'
    }).then(({value})=>{
        if(value==userinfo.value.password){
            submit_modify()
        }else{
            ElMessageBox.alert("认证失败，无法完成修改")
        }
    })
}
function submit_modify(){
    axios.post(
        '/api/user/modify',
        {
            id:userinfo.value.id,
            name:name.value,
            id_code:id_code.value,
            mobile:mobile.value,
            email:email.value,
            password:password1.value
        }).then((res)=>{
            userinfo.value.name=name.value
            userinfo.value.id_code=id_code.value
            userinfo.value.mobile=mobile.value
            userinfo.value.email=email.value
            userinfo.value.password=password1.value
            setInputStyle()
            ElMessage({message:"修改成功",type:"success"})
            modify.value=false
            ref_button1.value.ref.textContent="修改"
        }).catch((e)=>{
            switch(e.response.status){
                case 409:
                    ElMessageBox.alert("身份证/手机号/邮箱与数据库已有数据冲突")
                    break
                case 500:
                    ElMessageBox.alert("服务器内部错误")
                    break
                default:
                    ElMessageBox.alert("未知错误")
            }
        })
}

function handleInput(e,origin){
    if(e.srcElement.value!=userinfo.value[origin]){
        e.srcElement.style.color='red'
    }else{
        e.srcElement.style.color='black'
    }
}
</script>

<template>
<div style="display:flex; flex-direction:column;">
    <div class="row">
        <div class="title">姓名</div>
        <div class="content">
            <div>{{ userinfo.name }}</div>
            <div v-show="modify" @input="handleInput($event,'name')">
                <el-input v-model.trim="name" ref="ref_name"/>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="title">身份证</div>
        <div class="content">
            <div>{{ userinfo.id_code }}</div>
            <div v-show="modify" @input="handleInput($event,'id_code')">
                <el-input v-model.trim="id_code" ref="ref_id_code"/>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="title">手机号</div>
        <div class="content">
            <div>{{ userinfo.mobile }}</div>
            <div v-show="modify" @input="handleInput($event,'mobile')">
                <el-input v-model.trim="mobile" ref="ref_mobile"/>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="title">邮箱</div>
        <div class="content">
            <div>{{ userinfo.email }}</div>
            <div v-show="modify" @input="handleInput($event,'email')">
                <el-input v-model.trim="email" ref="ref_email"/>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="title">密码</div>
        <div class="content">
            <div> ****** </div>
            <div v-show="modify">
                <el-input v-model.trim="password1" ref="ref_password1" show-password/>
            </div>
            <div v-show="modify">
                <el-input v-model.trim="password2" ref="ref_password2" show-password/>
            </div>
        </div>
    </div>
    <div class=operations>
        <el-button @click=handleButton1 ref="ref_button1">修改</el-button>
        <el-button @click=handleButton2 v-show="modify">重置</el-button>
        <el-button @click=handleButton3 v-show="modify">提交</el-button>
    </div>
</div>
</template>

<style scoped>
.row{
    display:flex; 
    width:100%;
}
.title{
    width: 70px;
    font-size:medium;
    font-weight:bolder;
    text-align:justify;
    text-align-last:justify;
}
.content{
    margin-left:20px;
    font-size:medium;
    width:0;
    flex-grow:1;
}
.content-waiting{
    color:var(--el-color-warning);
    margin:10px 0;
}
.content-rejected{
    color:var(--el-color-error);
    margin:10px 0;
}
.content,
.content-waiting,
.content-rejected{
    word-wrap:break-word;
}

.operations{
    padding-top:10px;
    padding-bottom:10px;
    margin-top:10px;
    width:100%;
    text-align: center;
    background-color:whitesmoke;
}

/* 
.el-row{
    margin:10px 0;
    min-height:35px;
}
.title{
    font-weight:bolder;
    text-align:justify;
    text-align-last:justify;
}
.content,
.content-waiting,
.content-rejected{
    word-wrap:break-word;
}
.content-waiting{
    color:var(--el-color-warning);
    margin:10px 0;
}
.content-rejected{
    color:var(--el-color-error);
    margin:10px 0;
}
  
.operations{
    padding-top:10px;
    padding-bottom:10px;
    width:100%;
    text-align: center;
    background-color:whitesmoke;
} */
</style>